import React, { useContext, useEffect, ReactElement } from 'react';
import { ActiveContext } from '../Tabs/index';
import './index.scss';

type defaultProps = {
  title: string;
  name: string;
  children: ReactElement;
};

const Tab = (props: defaultProps) => {
  const { name, title, children } = props;
  const { value, onChange } = useContext(ActiveContext);

  const tabItem = () => {
    onChange(name);
  };

  return (
    <div className={`tab ${value == name ? 'active' : ''}`} onClick={tabItem}>
      <a>{title}</a>
    </div>
  );
};

export default Tab;
